/**
    购物车列表
*/
<template>
    <div>
        <TopNav />
        <div style="max-width:1200px;margin:auto;margin-top: 30px;">
            <div v-if="tableData.length > 0">
                <div>
                    <el-button type="danger" @click="eventDelete('')">批量删除</el-button>
                </div>
                <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="date" label="图片" width="180"></el-table-column>
                    <el-table-column prop="date" label="名称" width="180"></el-table-column>
                    <el-table-column prop="productPrice" label="价格" width="180"></el-table-column>
                    <el-table-column prop="productNumber" label="数量" width="180">
                        <template slot-scope="scope">
                            <el-input-number size="mini" v-model="scope.row.productNumber" @change="handleChange(scope.row)"
                                :min="1"></el-input-number>
                        </template>

                    </el-table-column>
                    <el-table-column label="小计">
                        <template slot-scope="scope">
                            <span style="color:red; font-weight:600;font-size:20px;"> {{ (scope.row.productPrice *
                                scope.row.productNumber).toFixed(2) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="danger" @click="eventDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div>总金额：<span style="font-size:40px;color:red;font-weight:600;">￥{{ total }}</span></div>
                <div style="text-align:right;"><el-button type="danger" style="font-size:20px;width:200px;height:50px;"
                        @click="eventSettle">去结算</el-button></div>
            </div>
            <div v-else>
                还没商品，快去<router-link to="/product/list">购物吧</router-link>
            </div>
        </div>
    </div>
</template>

<script>
import TopNav from '@/components/TopNav.vue'

export default {
    components: {
        TopNav
    },
    data() {
        return {
            tableData: [],
            multipleSelection: [],
            memberId: ''
        }
    },
    computed: {
        total() {
            let sum = 0
            this.multipleSelection.forEach(x => {
                sum += x.productNumber * x.productPrice
            })

            //总金额低于10000，要求增加1000元运费
            if (sum < 10000 && sum > 0) {
                sum += 1000
            }
            return sum.toFixed(2)
        }
    },
    mounted() {
        //从缓存获取登录的用户的Id 
        let member = localStorage.getItem("2011A_member_info")
        if (member == null) {
            this.$router.push('/login')
        }
        this.memberId = JSON.parse(member).id

        this.onloadCar()
    },
    methods: {
        //跳转到结算页
        eventSettle() {

            if (this.multipleSelection.length <= 0) {
                this.$message.error('请选择商品进行结算')
                return
            }

            this.$router.push({ name: 'car/settle', params: { data: this.multipleSelection } })
        },
        //表格列表的选择事件
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        // //批量删除
        // eventDeleteAll(){
        //     let url=this.$baseUrl + '/car/hash'
        //     let d= this.multipleSelection
        //     this.$http.delete(url,{data:d}).then(res=>{
        //         console.log(res)
        //     })
        // },
        //删除事件
        eventDelete(row) {
            let data = []
            if (row == '') {
                if (this.multipleSelection.length <= 0) {
                    this.$message.error('请至少一条商品！')
                    return
                }
                data = this.multipleSelection
            } else {
                data.push(row)
            }
            let url = this.$baseUrl + '/car/hash'

            this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.delete(url, { data: data }).then(res => {
                    //console.log(res)
                    if (res.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.onloadCar()
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });


        },
        //计数器的改变事件
        handleChange(row) {
            console.log(row);
            let url = this.$baseUrl + '/car/hash'
            let data = row
            this.$http.put(url, data).then(res => {
                console.log(res)
            })
        },
        //加载购物车数据
        onloadCar() {
            let memberId = this.memberId
            let url = this.$baseUrl + '/car/hash'
            this.$http.get(url, {
                params: {
                    key: memberId
                }
            }).then(res => {
                if (res.data.code == 200) {
                    this.tableData = res.data.data
                }
            })
        }
    }
}
</script>